import React, { Component } from 'react'

export default class ShopCar extends Component {
    state = {
        checkedAll:false
    }
    numberChange = (value,id)=>{
        //value的值 -1 +1
        this.props.changeShopProductNumber(value,id)
    }
    /**
     * 求总价
     */
    get sumPrice(){
        const {array} = this.props
        const result = array.filter(item=>item.checked).reduce((sum,item)=>{
            return sum += item.num * item.price
        },0)
        return result
    }
    checkedEvent = (event,id)=>{
        const chooseValue = event.target.checked;
        this.props.changeCheckStatus(chooseValue,id)
    }
    checkAllChange = (event)=>{
        const bool = event.target.value
        const {array} = this.props
        if(bool){
            array.forEach(element => {
                this.props.changeCheckStatus(true,element.id)
            });
        }else{
            array.forEach(element => {
                this.props.changeCheckStatus(false,element.id)
            });
        }
    }
    render() {
        const {checkedAll} = this.state
        return (
            <div>
                <table style={{ width: "100%" }}>
                    <thead>
                        <tr>
                            <th>
                                <input onChange={this.checkAllChange} defaultChecked={checkedAll} type="checkbox" />
                            </th>
                            <th>编号</th>
                            <th>名字</th>
                            <th>图片</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.array.map(item => {
                            return (
                                <tr key={item.id}>
                                    <td>
                                        <input onChange={(event)=>this.checkedEvent(event,item.id)} checked={item.checked} type="checkbox" />
                                    </td>
                                    <td>{item.id}</td>
                                    <td>{item.name}</td>
                                    <td>
                                        <img width="100px" src={item.imgSrc} alt="" />
                                    </td>
                                    <td>{item.price}</td>
                                    <td>
                                        <button onClick={()=>this.numberChange(-1,item.id)}>-</button>
                                        <span>{item.num}</span>
                                        <button onClick={()=>this.numberChange(1,item.id)}>+</button>
                                    </td>
                                    <td>{item.price * item.num}</td>
                                    <td>
                                        <button onClick={()=>this.props.deleteShopCar(item.id)}>移出</button>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
                <p>总价为：{this.sumPrice}元</p>
            </div>
        )
    }
}
